<template>
  <div class="page">
    <!--进度条-->
    <div class="row progressDiv">
      <span class="progressText">本周任务完成度:</span><span style="color:white;font-size:20px;margin-left:4px;margin-top:10px;">{{numToPercent}}</span>
      <div class="progress">
        <span class="red" :style="progressPercent()"></span>
      </div>
    </div>
    <!--:style="progressPercent()"-->
    <!--饼形图-->
    <div class="row between-span pieDiv">
      <div class="shadow pie1" style="margin-left:20px">
        <IEcharts class="fill pieIEcharts" :option="caseInfo" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="pieInfo1">
          <span>{{daicuishou}}个</span>
        </div>
        <div class="pieInfo2">
          <span>{{cuishouzhong}}个</span>
        </div>
        <div class="pieInfo3">
          <span>{{chengnuohuankuan}}个</span>
        </div>
        <div class="pieInfo4">
          <span>{{yuqihuankuan}}个</span>
        </div>
        <div class="pieInfo5">
          <span>{{tiqianjieqing}}个</span>
        </div>
        <div class="pieInfo6">
          <span>{{daifenpei}}个</span>
        </div>
        <hr class="hr">
        <div style="height:16px" class="pieInfo">
          <div class="column1">今日流入</div>
          <div class="column2">今日结清</div>
          <div class="column3">今日流出</div>
        </div>
        <div class="pieInfo">
          <div class="column1">{{flowInCaseToday}}个</div>
          <div style="text-align:center;color:#8C8C8C">{{finishCaseToday}}个</div>
          <div class="flowOutCaseToday">{{flowOutCaseToday}}个</div>
        </div>
      </div>

      <div class="shadow pie2">
        <IEcharts class="fill pieIEcharts" :option="caseMoney" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="pieCaeMoneyTop">
          <span>{{inAmount==0?0:inAmount}}万元</span>
        </div>
        <div class="pieCaseMoneyBottom">
          <span>{{waitCupo==0?0:waitCupo}}万元</span>
        </div>
        <hr class="hr">
        <div class="pieInfo">
          <div class="column1">回款总额</div>
          <div class="column2">本月回款</div>
          <div class="column3">今日回款</div>
        </div>
        <div class="pieInfo">
          <div class="column1">{{moneySumResult}}万元</div>
          <div style="text-align:center;color:#8C8C8C">{{monthMoneyResult}}万元</div>
          <div class="dayMoneyResult">{{dayMoneyResult}}万元</div>
        </div>
      </div>

      <div class="shadow pie3" style="margin-right:20px">
        <IEcharts class="fill pieIEcharts" :option="onlineInfo" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="pieTop">
          <span>{{onlineTime}}</span>
        </div>
        <div class="pieBottom">
          <span>{{offLineTime}}</span>
        </div>
        <hr class="hr">
        <div class="pieInfo">
          <div class="column1">在线时长</div>
          <div style="float:left;margin-left:96px;color:#8C8C8C">今日累计催收</div>
          <div class="column3">本月累计催收</div>
        </div>
        <div class="pieInfo">
          <div class="column1">{{(onlineTime===null)?'0h':onlineTime}}</div>
          <div style="color:#8C8C8C;positon:absolute;">{{dayFollowCount}}次</div>
          <div class="monthFollowCount">{{monthFollowCount}}次</div>
        </div>
      </div>
    </div>

    <!--柱形图-->
    <div class="row" style="margin-top:10px">
      <div class="col-span-4 histogramDiv">
        <IEcharts class="fill" :option="backMoney" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="fontFoot"></div>
      </div>
      <div class="col-span-4 histogramDiv">
        <IEcharts class="fill" :option="accCount" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="fontFoot"></div>
      </div>
      <div class="col-span-4 histogramDiv">
        <IEcharts class="fill" :option="caseNum" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
        <div class="fontFoot"></div>
      </div>
    </div>
  </div>

</template>

<script>
  import IEcharts from 'vue-echarts-v3'
  import servers from '@/config/servers'
  import net from '@/util/net'
  import { typeCodeConvert } from '@/util/filters'

  export default {
    name: 'welcome-acc',
    components: { IEcharts },
    props: {},
    data() {
      return {
        server: {
          getHomePageInformation: servers.HomePage.get_homePage_information,
          getOnlineUserDurationTimeMonth: servers.HomePage.get_online_userDuration_timeMonth
        },
        loading: false,
        // 案件情况饼形图
        caseInfo: {
          color: [
            '#f7c26d', '#F7786C', '#9b90c2', '#f67c4c', '#4ed48c', '#58b2dc'
          ],
          title: {
            text: '案件情况',
            padding: 20,
            x: 'left',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            top: 10,
            right: 80,
            itemWidth: 15,
            height: 200,
            orient: 'vertical',
            data: []
          },
          series: [{
            name: '案件情况',
            type: 'pie',
            radius: '55%',
            center: ['26%', '65%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 10,
                shadowColor: '#F7786C '
              },
              normal: {
                label: {
                  show: true,
                  formatter: '{d}%'
                },
                labelLine: { show: true }
              }
            }
          }]
        },
        // 案件金额饼形图
        caseMoney: {
          color: [
            '#92D5EF', '#f7c26d'
          ],
          title: {
            padding: 20,
            text: '案件金额',
            x: 'left',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            top: 60,
            right: 100,
            itemWidth: 15,
            orient: 'vertical',
            data: ['已入账', '待催收'],
            itemGap: 25
          },
          series: [{
            name: '案件金额',
            type: 'pie',
            radius: '55%',
            center: ['30%', '65%'],
            data: [{ value: 0, name: '已入账' },
              { value: 0, name: '待催收' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 10,
                shadowColor: '#F7786C'
              },
              normal: {
                label: {
                  show: true,
                  formatter: '{d}%'
                },
                labelLine: { show: true }
              }
            }
          }]
        },
        // 在线情况饼形图
        onlineInfo: {
          color: [
            '#87b7d5', '#84d5bc'
          ],
          title: {
            padding: 20,
            text: '在线情况',
            x: 'left',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            top: 80,
            right: 96,
            itemWidth: 15,
            orient: 'vertical',
            data: ['在线时长', '离线时长']
          },
          series: [{
            name: '在线情况',
            type: 'pie',
            radius: '55%',
            center: ['30%', '65%'],
            data: [
              { value: 0, name: '在线时长' },
              { value: 0, name: '离线时长' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 10,
                shadowColor: '#F7786C'
              },
              normal: {
                label: {
                  show: true,
                  formatter: '{d}%'
                },
                labelLine: { show: true }
              }
            }
          }]
        },
        // 本周回款柱形图
        backMoney: {
          title: {
            text: '本周回款',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          color: [' #F7786C'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            axisLine: {
              show: false
            },
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }],
          yAxis: [{
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }, {
            axisLine: {
              show: false
            },
            name: '万元/日',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }],
          series: [{
            name: '金额',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
        // 催计数柱形图
        accCount: {
          title: {
            text: '本周催计数',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          color: [' #84D5BC'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            axisLine: {
              show: false
            },
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }],
          yAxis: [{
            axisLine: {
              show: false
            },
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }, {
            axisLine: {
              show: false
            },
            name: '次/日',
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }],
          series: [{
            name: '次数',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
        // 结案数柱形图
        caseNum: {
          title: {
            text: '本周结案数',
            textStyle: {
              color: '#28313E',
              fontFamily: 'MicrosoftYaHei',
              fontWeight: 'normal'
            }
          },
          color: ['#87B7D5'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            axisLine: {
              show: false
            },
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }],
          yAxis: [{
            axisLine: {
              show: false
            },
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }, {
            axisLine: {
              show: false
            },
            name: '个/日',
            nameLocation: 'end',
            type: 'value',
            axisTick: {
              show: false
            },
            minInterval: 1
          }],
          series: [{
            name: '个数',
            type: 'bar',
            barWidth: '60%',
            data: []
          }]
        },
        taskFinished: 0,
        flowInCaseToday: '',
        finishCaseToday: '',
        flowOutCaseToday: '',
        moneySumResult: '',
        monthMoneyResult: '',
        dayMoneyResult: '',
        inAmount: '',
        waitCupo: '',
        onlineTime: '',
        offlineTime: '',
        caseList: [],
        monthFollowCount: '',
        daicuishou: 0,
        cuishouzhong: 0,
        chengnuohuankuan: 0,
        yuqihuankuan: 0,
        tiqianjieqing: 0,
        daifenpei: 0,
        dayFollowCount: 0,
        offLineTime: 0
      }
    },
    mounted() {
      /**
       * 获取主页各种信息
       */
      net.send({
        server: this.server.getHomePageInformation
      }).then((data) => {
        // 本周完成度
        this.taskFinished = data.data.taskFinished
        // 已入账
        this.caseMoney.series[0].data[0].value = this.change6Decimals(data.data.caseAmtResult.inAmount / 10000)
        this.inAmount = this.change6Decimals(data.data.caseAmtResult.inAmount / 10000)
        // 待催收
        this.caseMoney.series[0].data[1].value = this.change6Decimals(data.data.caseAmtResult.waitCupo / 10000)
        this.waitCupo = this.change6Decimals(data.data.caseAmtResult.waitCupo / 10000)
        // 今日流入案件
        this.flowInCaseToday = data.data.flowInCaseToday
        // 今日结清
        this.finishCaseToday = data.data.finishCaseToday
        // 今日流出
        this.flowOutCaseToday = data.data.flowOutCaseToday
        // 回款总额
        this.moneySumResult = data.data.moneySumResult
        // 本月回款
        this.monthMoneyResult = data.data.monthMoneyResult
        // 今日回款
        this.dayMoneyResult = data.data.dayMoneyResult
        // 案件情况饼形图
        this.caseInfo.series[0].data = data.data.caseCountResultList.map(v => {
          return {
            value: v.num,
            name: typeCodeConvert(v.status, '0018')
          }
        })
        // 案件情况饼形图说明
        this.caseInfo.legend.data = data.data.caseCountResultList.map(v => {
          return typeCodeConvert(v.status, '0018')
        })
        // 今日累计催收
        this.dayFollowCount = data.data.dayFollowCount
        // 本月催计数
        this.monthFollowCount = data.data.monthFollowCount
        // 本周回款柱形图数据
        this.backMoney.series[0].data = data.data.weekRepaySum.map(v => {
          return v.amount / 10000
        })
        // 本周催计数柱形图数据
        this.accCount.series[0].data = data.data.weekFollCount.map(v => {
          return v.num
        })
        // 本周结案数柱形图数据
        this.caseNum.series[0].data = data.data.weekCaseEndCount.map(v => {
          return v.num
        })
        // 案件情况说明数据
        this.daicuishou = data.data.caseCountResultList[0].num
        this.cuishouzhong = data.data.caseCountResultList[1].num
        this.chengnuohuankuan = data.data.caseCountResultList[2].num
        this.yuqihuankuan = data.data.caseCountResultList[3].num
        this.tiqianjieqing = data.data.caseCountResultList[4].num
        this.daifenpei = data.data.caseCountResultList[5].num
      })

      /**
       * 获取在线时长
       */
      net.send({
        server: this.server.getOnlineUserDurationTimeMonth
      }).then((data) => {
        console.log(data)
        this.onlineTime = this.parseSecond(data.duration)
        this.offLineTime = this.parseSecond(data.offLineDuration)
        this.onlineInfo.series[0].data[0].value = data.duration
        this.onlineInfo.series[0].data[1].value = data.offLineDuration
      })
    },
    methods: {
      onReady() {},
      onClick() {},
      /**
       * 保留6位小数
       */
      change6Decimals(amount) {
        return amount.toFixed(6)
      },
      /**
       * 进度条百分比显示
       */
      progressPercent() {
        var strData = parseFloat(this.taskFinished) * 10000
        strData = Math.round(strData)
        strData /= 100.00
        var ret = strData.toString() + '%'
        return {
          width: ret
        }
      },
      /**
       * 秒转化为小时分钟
       */
      parseSecond(second) {
        var seconds = parseInt(second)
        if (seconds < 60) {
          return '0m'
        }
        var minutes = parseInt(seconds / 60)
        if (minutes < 60) {
          return minutes + 'm'
        }
        var hours = parseInt(minutes / 60)
        var hoursMinute = parseInt(minutes % 60)
        return hours + 'h' + hoursMinute + 'm'
      }
    },
    computed: {
      /**
       * 转化为百分数
       */
      numToPercent() {
        var strData = parseFloat(this.taskFinished) * 10000
        strData = Math.round(strData)
        strData /= 100.00
        var ret = strData.toString() + '%'
        return ret
      }
    }
  }

</script>

<style scoped>
  .progress {
    width: 98%;
    height: 10px;
    background: white;
    float: left;
    border-radius: 10px;
    margin-left: 10px;
    margin-top: -12px;
  }


  .progress>span {
    position: relative;
    float: left;
    margin: 0;
    min-width: 0px;
    height: 10px;
    line-height: 10px;
    text-align: right;
    background: #cccccc;
    border-color: #bfbfbf #b3b3b3 #9e9e9e;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
    background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
    background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0 .3), 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .progress>span:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: url('../../assets/images/progress.png') 0 0 repeat-x;
    border-radius: 10px;
    margin-top: 0px;
  }

  .progress .red {
    background: #F48D7E;
    border-color: #c73321 #b12d1e #8e2418;
    background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
    background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
    background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
    background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%);
  }

  .echarts {
    width: 400px;
    height: 400px;
  }

  .progressDiv {
    background: #F7786C;
    border-radius: 3px;
    height: 80px;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .progressText {
    font-size: 20px;
    color: white;
    margin-top: 10px;
    margin-left: 5px;
    padding-bottom: 0;
    line-height: 22px
  }



  .pieIEcharts {
    height: 150px
  }

  .pieDiv {
    border-radius: 3px;
    background: #ECEFF4;
    margin-top: 10px;
    height: 280px
  }

  .pie1,
  .pie2,
  .pie3 {
    height: 240px;
    background: #FFFFFF;
    margin-top: 20px;
    width: 30%;
    border-radius: 3px;
    position: relative;
  }

  .pieInfo1 {
    position: absolute;
    left: 320px;
    top: 14px;
  }

  .pieInfo2 {
    position: absolute;
    left: 320px;
    top: 38px;
  }

  .pieInfo3 {
    position: absolute;
    left: 320px;
    top: 62px;
  }

  .pieInfo4 {
    position: absolute;
    left: 320px;
    top: 86px;
  }

  .pieInfo5 {
    position: absolute;
    left: 320px;
    top: 110px;
  }

  .pieInfo6 {
    position: absolute;
    left: 320px;
    top: 134px;
  }

  .pieTop {
    position: absolute;
    right: 20px;
    top: 85px;
  }

  .pieCaeMoneyTop {
    position: absolute;
    left: 224px;
    top: 84px;
  }

  .pieCaseMoneyBottom {
    position: absolute;
    left: 224px;
    top: 124px;
  }

  .pieBottom {
    position: absolute;
    right: 20px;
    top: 109px;
  }

  .pieInfo {
    height: 16px;
    margin-top: 10px
  }


  .hr {
    border: 1px solid #DEE1E5;
    width: 90%;
    margin-top: 30px;
    color: #DEE1E5
  }

  .column1 {
    margin-left: 20px;
    float: left;
    color: #8C8C8C
  }

  .column2 {
    float: left;
    margin-left: 125px;
    color: #8C8C8C
  }

  .column3 {
    float: right;
    margin-right: 20px;
    color: #8C8C8C
  }

  .flowOutCaseToday,
  .dayMoneyResult,
  .monthFollowCount {
    float: right;
    margin-right: 20px;
    color: #8C8C8C;
    margin-top: -18px;
  }

  .histogramDiv {
    height: 220px;
    width: 250px;
    position: relative;
  }

  .fontFoot {
    width: 96px;
    height: 10px;
    background: #64B5F6;
    position: absolute;
    left: 12px;
    top: 30px
  }

</style>
